<template>
    <div>
        <el-form style="display: flex; gap: 16px;">
            <el-form-item>
                <el-input v-model="searchForm.keyword" placeholder="输入商品编号/名称/型号/品牌" style="width: 250px;"></el-input>
            </el-form-item>
            <el-form-item label="仓库：" style="width: 200px;">
                <el-select v-model="searchForm.warehouse" placeholder="（空）" clearable style="width: 100%">
                    <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="searchForm.includeZeroStock">零库存商品</el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="goodsList" border height="282" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="60" align="center" />
            <el-table-column prop="photo" label="图片" width="120">
                <template #default="scope">
                    <img v-if="scope.row.photo" :src="scope.row.image"
                        style="width: 40px; height: 40px; object-fit: cover;" />
                    <span v-else>无图片</span>
                </template>
            </el-table-column>
            <el-table-column prop="code" label="商品编号" width="100" />
            <el-table-column prop="brand" label="品牌" width="120" />
            <el-table-column prop="name" label="商品名称" width="120" />
            <el-table-column prop="specification" label="规格型号" width="120" />
            <el-table-column prop="type" label="商品类别" width="120" />
            <el-table-column prop="attribute" label="属性" width="120" />
            <el-table-column prop="unit" label="单位" width="120" />
            <el-table-column prop="remark" label="备注" width="120" />
        </el-table>
        <el-pagination style="float: right; margin-top: 16px;" background layout="prev, pager, next,jumper"
            :total="pageInfo.total" :page-size="pageInfo.pageSize" :current-page="pageInfo.pageNum"
            @current-change="changePage" v-model:current-page="pageInfo.pageNum" />
        <div class="selected-info" v-if="selectedGoods.length > 0">
            已选择 {{ selectedGoods.length }} 个商品
        </div>

        <span class="dialog-footer">
            <el-button type="primary" @click="confirmGoods">确定</el-button>
            <el-button @click="handleCancel">取消</el-button>
        </span>

    </div>
</template>

<script setup>
import { ref, reactive, defineEmits, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const emit = defineEmits(['update:visible', 'confirm'])
const loading = ref(false)
// 模拟数据 - 添加更多商品数据
const goodsList = ref([])
onMounted(() => {
    goodsPageList()
})
const pageInfo = reactive({
    total: 1,
    pageSize: 3,
    pageNum: 1
});
const goodsPageList = async () => {
    const params = {
        pageNum: pageInfo.pageNum,
        pageSize: pageInfo.pageSize
    }
    loading.value = true
    const res = await axios.get("/lxw/goodsPageInfo", { params })
    console.log("商品选择列表页数",pageInfo.pageNum)
    console.log("商品选择列表",res)
    if (res.data.code == 5200) {
        goodsList.value = res.data.goodsList.list
        pageInfo.total = res.data.goodsList.total
    }
    else {
        ElMessage.error(res.data.msg)
    }
}
const changePage = (page) => {
    pageInfo.pageNum = page;
    goodsPageList()
};

const warehouseList = ref([
    { id: 1, name: '主仓库' },
    { id: 2, name: '备用仓库' }
])

const searchForm = reactive({
    keyword: '',
    warehouse: '',
    includeZeroStock: false
})


// 改为数组，支持多选
const selectedGoods = ref([])

// 处理选择变化
const handleSelectionChange = (selection) => {
    selectedGoods.value = selection
}



// 查询
const handleSearch = () => {
    console.log('查询条件:', searchForm)
    ElMessage.info('查询功能开发中...')
}

// 确定选择
const confirmGoods = () => {
    if (selectedGoods.value.length === 0) {
        return ElMessage.warning('请至少选择一个商品')
    }

    // 过滤出有数量的商品
    const validGoods = selectedGoods.value
    emit('confirm', validGoods)
    emit('update:visible', false)
    ElMessage.success(`成功选择 ${validGoods.length} 个商品`)
}

// 取消
const handleCancel = () => {
    emit('update:visible', false)
}
</script>

<style scoped>
.dialog-footer {
    display: block;
    text-align: center;
    margin-top: 16px;
}

.selected-info {
    margin: 12px 0;
    padding: 8px 12px;
    background-color: #f0f9ff;
    border: 1px solid #91d5ff;
    border-radius: 4px;
    color: #1890ff;
    font-size: 14px;
}
</style>